@charset "UTF-8";
/**
 * libing 2025-04-18
 * 设置好设计稿的宽度，页面自动转换为vw单位，仅精确到小数点后两位
 * 引用方法：@import './vw.scss';
 * @function可以直接使用，例如：width: vw(100);
 * @mixin需要@include来使用，例如：@include w(100);
 * @include可输入in作为快捷键，需更新vscode用户代码片段
*/

// 设计稿宽度（单位像素）
$lzDesignWidth: 750;

// 计算百分比
@function percent($pix, $yourPix: $lzDesignWidth) {
    @return percentage(round($pix / $yourPix * 10000) / 10000);
}

// 计算vw
@function vw($pix, $yourPix: $lzDesignWidth) {
    @return round($pix / $yourPix * 10000) / 100+vw;
}

// 设置宽度和最大宽度
@mixin w($width) {
    width: vw($width);
    max-width: $width + px;
}

// 设置高度和最大高度
@mixin h($height) {
    height: vw($height);
    max-height: $height + px;
}

// 同时设置宽度和最大宽度，高度和最大高度
@mixin wh($width, $height) {
    width: vw($width);
    max-width: $width + px;
    height: vw($height);
    max-height: $height + px;
}

// 定位 top left
@mixin tl($top, $left, $width, $height) {
    position: absolute;
    @include w($width);
    top: vw($top);
    left: vw($left);

    // 如果有需要设置的高度，设置高度
    @if $height {
        @include h($height);
    }
}

// 定位 top right
@mixin tr($top, $right, $width, $height) {
    position: absolute;
    @include w($width);
    top: vw($top);
    right: vw($right);

    // 如果有需要设置的高度，设置高度
    @if $height {
        @include h($height);
    }
}

// 定位 bottom left
@mixin bl($bottom, $left, $width, $height) {
    position: absolute;
    @include w($width);
    bottom: vw($bottom);
    left: vw($left);

    // 如果有需要设置的高度，设置高度
    @if $height {
        @include h($height);
    }
}

// 定位 bottom right
@mixin br($bottom, $right, $width, $height) {
    position: absolute;
    @include w($width);
    bottom: vw($bottom);
    right: vw($right);

    // 如果有需要设置的高度，设置高度
    @if $height {
        @include h($height);
    }
}

// 定位 center，默认水平和垂直居中，x轴和y轴都可以自定义，传入true表示居中，传入10px、10%等具体值为自定义
@mixin center($width, $height, $x: true, $y: true) {
    position: absolute;
    @include w($width);

    // 如果有需要设置的高度，设置高度
    @if $height {
        @include h($height);
    }

    @if $x == true && $y == true {
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }
    @else if $x == true && $y != true {
        left: 50%; top: $y;
        transform: translateX(-50%);
    }
    @else if $x != true && $y == true {
        left: $x; top: 50%;
        transform: translateY(-50%);
    }
    @else if $x != true && $y != true {
        left: $x; top: $y;
    }

}

.center{
    @include center(100, 300, x, true);
}